<template>
  <div>
    <div class="home">
      <!-- 左边 -->
      <div class="left_Box">
        <div>
          <img class="logoimg" src="../../static/imgs/logo.png" alt="" />
        </div>

        <div class="datetime">
          <span class="numberbg">{{ year }}</span>
          年
          <span class="numberbg">{{ dateArr[0] }}</span>
          月
          <span class="numberbg">{{ dateArr[1] }}</span>
          日
          <span class="numberbg" style="width: 80px;">{{ currentTime }}</span>
        </div>

        <div class="tipBox">温馨提示：点餐截止时间为{{ endTime }}</div>
        <div class="meal">
          <div class="meal-btn meal-btn-1" :class="acriveIndex == 0 ? 'meal-btn-sty' : ''" @click="handleMeal(0)">
            午餐
          </div>
          <div class="meal-btn" :class="acriveIndex == 1 ? 'meal-btn-sty' : ''" @click="handleMeal(1)">
            晚餐
          </div>
        </div>
        <div class="bg-variety">
          <div class="bg-variety-box" v-for="(item, index) in categoryList" :key="index"
            @click="handlecategoryindex(item, index)">
            <img class="bg-variety-img" src="../../static/imgs/logo.png" alt="" />

            <div class="bg-variety-on varietyed">
              <div>
                <div class="bg-variety-on-sty">
                  <img v-if="categoryIndex == index" class="bg-variety-on-img" src="../../static/imgs/logo.png" alt="" />
                  <img v-else class="bg-variety-on-img" src="../../static/imgs/icon1.png" alt="" />
                  <div class="bg-variety-on-text">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="contentBox">
        <div class="topBox">
          <div class="top_left top_content">
            <img class="searchicon" src="../../static/imgs/search.png" alt="" />
            <input type="text" v-model="searchValue" @input="handleInputchange" placeholder="搜索关键词" />
            <div class="searchtext" @click="handleGetgoodsList">搜索</div>
          </div>
          <div class="top_right top_content">{{ geade }}</div>
        </div>

        <div v-if="showHandle">
          <div v-if="goodsList.length > 0" class="foodList">
            <div class="foodItem" v-for="(item, index) in goodsList" :key="index">
              <img class="food_banner" :src="item.image" alt="" srcset="" />
              <div class="zz_box"></div>
              <div class="detail">
                <div class="food_title">{{ item.name }}</div>
                <div class="handlebox">
                  <img class="handleIcon" src="../../static/imgs/close.png" alt="" srcset=""
                    @click="handleJianchange(item, index)" />
                  <div class="numberBox">{{ item.number }}</div>
                  <img class="handleIcon" src="../../static/imgs/add.png" alt="" srcset=""
                    @click="handleJiachange(item, index)" />
                </div>
              </div>
            </div>
          </div>
          <div v-else class="nodata">
            <img src="../../static/imgs/nullData.png" alt="" srcset="">
          </div>
        </div>

        <div v-else class="endtext">
          点餐已截至
        </div>



      </div>

      <!-- 右边 -->

      <div class="right_Box">
        <div class="topBox">
          <div class="heng"></div>
          <img class="selecticon" src="../../static/imgs/selectedicon.png" alt="" srcset="" />
          <div class="heng"></div>
        </div>

        <div class="selectedList">
          <div class="listBox">
            <div class="titleBox">午餐</div>

            <div v-if="lunchList.length > 0" class="itemBox">
              <div class="food_item_list" v-for="(item, index) in lunchList" :key="index">
                <img class="list_img" :src="item.image" alt="" srcset="" />
                <div class="name">{{ item.name }}</div>
                <div class="number">X <span>{{ item.number }}</span></div>
              </div>
            </div>
            <div v-else class="itemBox itemBox_s">
              请点菜品
            </div>
          </div>

          <div class="listBox">
            <div class="titleBox">晚餐</div>
            <div v-if="dinnerList.length > 0" class="itemBox">
              <div class="food_item_list" v-for="(item, index) in dinnerList" :key="index">
                <img class="list_img" :src="item.image" alt="" srcset="" />
                <div class="name">{{ item.name }}</div>
                <div class="number">X <span>{{ item.number }}</span></div>
              </div>
            </div>
            <div v-else class="itemBox itemBox_s">
              请点菜品
            </div>
          </div>
          <div class="submitbtn" @click="handleSubmitBoxShow">提交</div>
        </div>
      </div>

      <el-dialog custom-class="submitout_box" :visible.sync="dialogTableVisible" :show-close="false" top="2vh">
        <div class="submitinner_Box">
          <div v-if="showFlag" class="topBox">
            <div class="heng"></div>
            <img class="selecticon" src="../../static/imgs/selectedicon.png" alt="" srcset="" />
            <div class="heng"></div>
          </div>
          <div v-else class="completeBox">
            <img class="completeimgs" src="../../static/imgs/complete.png" alt="" srcset="" />
          </div>

          <div class="listoutBox">
            <div class="listBox">
              <div class="titleBox">午餐</div>

              <div v-if="lunchList.length > 0" class="itemBox">
                <div class="food_item_list" v-for="(item, index) in lunchList" :key="index">
                  <img class="list_img" :src="item.image" alt="" srcset="" />
                  <div class="name">{{ item.name }}</div>
                  <div class="number">X <span>{{ item.number }}</span></div>
                </div>
              </div>
              <div v-else class="itemBox itemBox_s itemBox_t">
                您未点午餐
              </div>
            </div>

            <div class="listBox">
              <div class="titleBox">晚餐</div>
              <div v-if="dinnerList.length > 0" class="itemBox">
                <div class="food_item_list" v-for="(item, index) in dinnerList" :key="index">
                  <img class="list_img" :src="item.image" alt="" srcset="" />
                  <div class="name">{{ item.name }}</div>
                  <div class="number">X <span>{{ item.number }}</span></div>
                </div>
              </div>
              <div v-else class="itemBox itemBox_s itemBox_t">
                您未点晚餐
              </div>
            </div>
          </div>

          <div class="btnBox">
            <div v-if="showFlag" class="btn" @click="handleclose">返回编辑</div>
            <div v-if="showFlag" class="btn btns" @click="handleSubmitFood">
              确认提交
            </div>
            <div v-else class="btn btns" @click="handlecomfig">完成</div>
          </div>
        </div>
      </el-dialog>
    </div>

  </div>
</template>


<script>
import { category, goodsList, config, confirmOrder } from "@/utils/api"
export default {
  components: {},
  data() {
    return {
      acriveIndex: 0,
      varietyData: [
        "https://img0.baidu.com/it/u=2135414329,309210534&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=500",
        "https://img0.baidu.com/it/u=2135414329,309210534&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=500",
        "https://img0.baidu.com/it/u=2135414329,309210534&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=500",
        "https://img0.baidu.com/it/u=2135414329,309210534&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=500",
      ],
      dialogTableVisible: false,
      showFlag: true,
      categoryAlllist: [],
      categoryList: [],
      categoryIndex: 0,
      category_id: "",
      searchValue: "",
      goodsList: [],
      lunchList: [],
      dinnerList: [],
      endTime: "",
      dateArr: [],
      year: "",
      currentTime: '',
      geade: "",//年级区分
      showHandle: true,
    };
  },
  async created() {
    // http://39.104.85.240/h5/#/?geade=高中三年级
    // console.log("0000000", this.$route.query.geade)
    if (this.$route.query.geade) {
      this.geade = this.$route.query.geade
    }
    await this.handleGetconfig()
    await this.isTargetTimeReached()
    this.handleGetcategory()
    this.handlecurrentTime()
    this.updateTime();

  },
  mounted() {
  },

  methods: {
    isTargetTimeReached() {
      console.log("endTime", this.endTime)

      const target = this.endTime.split(':').map(Number);
      const now = new Date();
      const nowHours = now.getHours();
      const nowMinutes = now.getMinutes();
      const nowTime = nowHours * 60 + nowMinutes;
      const endTime = target[0] * 60 + target[1];
      this.showHandle = nowTime < endTime
      this.$forceUpdate()
      console.log("nowTime > endTime", nowTime, endTime, nowTime > endTime)
    },
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString();
      setTimeout(this.updateTime, 1000);
    },

    //配置信息
    async handleGetconfig() {
      let res = await config()
      this.endTime = res.data[0].value
      // this.endTime = "24:00"

    },
    //菜品类别
    async handleGetcategory() {
      let res = await category()
      this.categoryAlllist = res.data
      this.categoryList = res.data[0].chidren
      this.category_id = this.categoryList[0].id
      this.handleGetgoodsList()
      // console.log("菜品类别", this.categoryList)
    },

    //切换中晚餐
    handleMeal(index) {
      this.acriveIndex = index;
      this.categoryList = this.categoryAlllist[index].chidren
      this.categoryIndex = 0
      this.category_id = this.categoryList[0].id
      this.handleGetgoodsList()

    },
    //菜品分类切换
    handlecategoryindex(item, index) {
      this.categoryIndex = index
      this.category_id = item.id
      this.handleGetgoodsList()
    },
    //菜品列表
    async handleGetgoodsList() {
      let res = await goodsList({
        page: 1,
        page_size: 10,
        name: this.searchValue,
        category_id: this.category_id
      })
      this.goodsList = res.data.data
      this.goodsList.forEach((item, index) => {
        item.number = 0
      })
      this.handlechangeGoodlist()
    },
    handleInputchange() {
      if (this.searchValue == "") {
        this.handleGetgoodsList()
      }
    },
    //回显选过的菜品数量
    handlechangeGoodlist() {
      // 午餐
      this.lunchList.forEach((lunchitem, lunchindex) => {
        this.goodsList.forEach((goodsitem, goodsindex) => {
          if (lunchitem.id == goodsitem.id) {
            goodsitem.number = lunchitem.number
          }
        })
      })
      //晚餐
      this.dinnerList.forEach((dinneritem, dinnerindex) => {
        this.goodsList.forEach((goodsitem, goodsindex) => {
          if (dinneritem.id == goodsitem.id) {
            goodsitem.number = dinneritem.number
          }
        })
      })
    },

    //删除菜品
    handleJianchange(item, index) {
      if (this.goodsList[index].number == 0) return
      if (this.acriveIndex == 0) {
        if (this.goodsList[index].number == 1) {
          this.lunchList.forEach((lunchitem, lunchindex) => {
            if (lunchitem.id == item.id) {
              this.lunchList.splice(lunchindex, 1)
              this.goodsList[index].number = 0
            }
          })
        } else {
          this.lunchList.forEach((lunchitem, lunchindex) => {
            if (lunchitem.id == item.id) {
              this.lunchList[lunchindex].number--
              this.goodsList[index].number = this.lunchList[lunchindex].number
              this.$forceUpdate()
            }
          })

        }
      } else {
        if (this.goodsList[index].number == 1) {
          this.dinnerList.forEach((dinneritem, dinnerindex) => {
            if (dinneritem.id == item.id) {
              this.dinnerList.splice(dinnerindex, 1)
              this.goodsList[index].number = 0
            }
          })
        } else {
          this.dinnerList.forEach((dinneritem, dinnerindex) => {
            if (dinneritem.id == item.id) {
              this.dinnerList[dinnerindex].number--
              this.goodsList[index].number = this.dinnerList[dinnerindex].number
              this.$forceUpdate()
            }
          })
        }
      }
    },
    //添加菜品
    handleJiachange(item, index) {
      console.log("item", item)
      //午餐加菜品
      if (this.acriveIndex == 0) {
        //限制餐品数量逻辑
        if (item.is_limit == 1) {
          let sum = 1
          this.lunchList.forEach((subitem, subindex) => {
            if (subitem.category_id == item.category_id) {
              sum = sum + subitem.number
            }
          })
          if (sum > item.limit_num) {
            this.$message({
              message: `该餐品只允许点${item.limit_num}份`,
              type: 'warning'
            });
            return
          }
        }


        //对应的菜品列表加1
        this.goodsList[index].number++
        //右侧如果有已经点过的餐品  要判断是添加的重复的还是之前没有的
        if (this.lunchList.length > 0) {
          const hasElement = this.lunchList.some(arrayitem => arrayitem.id === item.id);
          if (!hasElement) {
            this.lunchList.push(item)
          }
        } else {
          //右侧如果还没点菜就直接加进去
          this.lunchList.push(item)
        }
      } else {
        this.goodsList[index].number++
        //右侧如果有已经点过的餐品  要判断是添加的重复的还是之前没有的
        if (this.dinnerList.length > 0) {
          const hasElement = this.dinnerList.some(arrayitem => arrayitem.id === item.id);
          if (!hasElement) {
            this.dinnerList.push(item)
          }
        } else {
          //右侧如果还没点菜就直接加进去
          this.dinnerList.push(item)
        }
      }
    },

    handleSubmitBoxShow() {
      if (!this.showHandle) {
        this.$message({
          message: '点餐已截止！',
          type: 'warning'
        });
        return
      }
      if (this.lunchList.length == 0 && this.dinnerList.length == 0) {
        this.$message({
          message: '您还未点餐哦！',
          type: 'warning'
        });
        return
      }
      this.dialogTableVisible = true;
    },
    //编辑/关闭弹框
    handleclose() {
      this.dialogTableVisible = false;
      this.showFlag = true;
    },
    //提交餐品
    async handleSubmitFood() {
      let dataArr = []
      this.lunchList.forEach((item, index) => {
        dataArr.push({
          goods_id: item.id,
          num: item.number,
          category_id: 1,
        })
      })
      this.dinnerList.forEach((item, index) => {
        dataArr.push({
          goods_id: item.id,
          num: item.number,
          category_id: 2,
        })
      })
      let data = {
        data: dataArr,
        grade: this.geade
      }
      // console.log("dataarr", data)
      let res = await confirmOrder(data)
      if (res.code == 1000) {
        this.showFlag = false;
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        });
      }
    },

    handlecomfig() {
      this.dialogTableVisible = false
      setTimeout(() => {
        window.location.reload()
      }, 500)
    },

    handlecurrentTime() {
      var date = new Date();
      this.year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      this.dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < this.dateArr.length; i++) {
        if (this.dateArr[i] >= 1 && this.dateArr[i] <= 9) {
          this.dateArr[i] = "0" + this.dateArr[i];
        }
      }

    },

  },
};
</script> 

<style scoped lang="scss">
.itemBox_t {
  color: #f89503;
  width: 100%;
  text-align: center;
  line-height: 275px;
  font-size: 18px;
}

.nodata {
  width: 100%;
  height: 500px;

  img {
    width: 500px;
    height: 500px;
    margin-left: 305px;
  }
}

.endtext {
  width: 100%;
  text-align: center;
  margin-top: 250px;
  color: #f89503;
}

.home {
  width: 100%;
  max-height: 100%;
  background: #fff8ed;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .left_Box {
    width: 375px;
    // height: 980px;
    background: #fff8ed;
    box-shadow: 4px 0px 50px 0px rgba(0, 0, 0, 0.08);
    border-radius: 0px 50px 50px 0px;
    // background-color: pink;
    margin-top: 50px;
    padding: 30px;
    box-sizing: border-box;

    .logoimg {
      width: 120px;
      height: 120px;
      margin-left: 90px;
      margin-top: -90px;
    }

    .datetime {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #f89503;
      line-height: 19px;

      .numberbg {
        display: inline-block;
        width: 57px;
        height: 46px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10px 10px 10px 10px;
        text-align: center;
        line-height: 46px;
        color: #121013;
      }
    }

    .tipBox {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #f89503;
      line-height: 19px;
      text-align: left;
      margin-top: 22px;
    }

    .meal {
      display: flex;
      align-items: center;
      margin-top: 30px;

      .meal-btn {
        width: 96px;
        height: 45px;
        border-radius: 100px;
        border: 1px solid #eee;
        font-size: 18px;
        line-height: 45px;
        text-align: center;
        color: #999;
        cursor: pointer;
      }

      .meal-btn-1 {
        margin-right: 10px;
      }

      .meal-btn-sty {
        background: #f89503;
        color: #ffffff;
      }
    }

    .bg-variety {
      margin-top: 30px;

      &-box {
        width: 315px;
        height: 150px;
        margin-bottom: 30px;
        position: relative;
        border-radius: 20px;
      }

      &-img {
        width: 315px;
        height: 150px;
        margin-bottom: 30px;
        border-radius: 20px;
        object-fit: cover;
      }

      &-on {
        width: 315px;
        height: 150px;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        cursor: pointer;

        &-sty {
          display: flex;
        }

        &-img {
          width: 28px;
          height: 28px;
        }

        &-text {
          font-size: 20px;
          color: #fff;
          padding-left: 6px;
          z-index: 9999;
        }

        &-icon {
          margin-top: 20px;
        }
      }

      .varietyed {
        background: #000;
        opacity: 0.6;
      }
    }
  }

  .contentBox {
    // margin-left: 30px;
    width: 1080px;
    height: 200px;
    // background-color: pink;

    .topBox {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .top_content {
        width: 545px;
        height: 80px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid #ffe6be;
      }

      .top_left {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 80px 0px 0px 80px;

        .searchicon {
          width: 24px;
          height: 24px;
        }

        input {
          height: 40px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20px;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          outline: none;
          margin-left: 3px;
        }

        .searchtext {
          width: 80px;
          height: 40px;
          border-radius: 40px;
          text-align: center;
          line-height: 40px;
          background-color: #f89503;
          color: #fff;
          font-size: 18px;
          cursor: pointer;
        }
      }

      .top_right {
        border-radius: 0px 80px 80px 0px;
        line-height: 23px;
        text-align: center;
        line-height: 80px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #121013;
      }
    }

    .foodList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // background-color: pink;
      margin-top: 30px;

      .foodItem {
        width: 240px;
        height: 287px;
        margin-right: 40px;
        margin-bottom: 40px;
        position: relative;

        .food_banner {
          width: 240px;
          height: 240px;
          border-radius: 20px;
          object-fit: cover;
        }

        .zz_box {
          width: 240px;
          height: 240px;
          border-radius: 20px;
          // background: #000;
          opacity: 0.2;
          position: absolute;
          top: 0;
          z-index: 999999;
        }

        .detail {
          width: 220px;
          height: 87px;
          background: #ffffff;
          box-shadow: 0px 16px 16px 0px rgba(203, 188, 164, 0.5);
          margin: 0 auto;
          transform: translateY(-47px);
          padding: 15px;
          box-sizing: border-box;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #121013;
          line-height: 21px;
          border-radius: 10px 40px 10px 10px;

          .food_title {}

          .handlebox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: end;
            margin-top: 3px;

            .numberBox {
              width: 51px;
              font-family: DIN Next LT Pro, DIN Next LT Pro;
              font-weight: 500;
              font-size: 28px;
              color: #121013;
              line-height: 33px;
              text-align: center;
            }

            .handleIcon {
              width: 24px;
              height: 24px;
              cursor: pointer;
            }
          }
        }
      }

      .foodItem:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }

  .right_Box {
    // margin-left: 30px;

    .topBox {
      width: 375px;
      display: flex;
      align-items: center;

      .selecticon {
        width: 91px;
        height: 27px;
        margin: 0 10px;
      }

      .heng {
        width: 100px;
        height: 2px;
        background-color: #ffe6be;
      }
    }

    .selectedList {
      margin-top: 30px;
      width: 375px;
      height: 980px;
      background: #fff8ed;
      box-shadow: -4px 0px 50px 0px rgba(0, 0, 0, 0.08);
      border-radius: 50px 0px 0px 0px;
      padding: 30px;
      box-sizing: border-box;

      .listBox {
        width: 315px;
        height: 335px;
        box-shadow: -4px 0px 50px 0px rgba(0, 0, 0, 0.08);
        border-radius: 15px 55px 10px 10px;
        border: 1px solid #f89503;
        margin-bottom: 30px;

        .titleBox {
          width: 315px;
          height: 50px;
          background: #f89503;
          border-radius: 10px 50px 0px 0px;
          color: #ffffff;
          text-align: center;
          line-height: 50px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
        }

        .itemBox {
          width: 100%;
          height: 275px;
          padding: 10px 20px;
          box-sizing: border-box;
          overflow: auto;

          .food_item_list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .list_img {
              width: 58px;
              height: 58px;
              box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
              border-radius: 10px 10px 10px 10px;
              object-fit: cover;
            }

            .name {
              width: 150px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18px;
              color: #121013;
            }

            .number {
              font-family: DIN Next LT Pro, DIN Next LT Pro;
              font-weight: 400;
              font-size: 18px;
              color: #000;
            }
          }
        }

        .itemBox_s {
          color: #f89503;
          width: 100%;
          text-align: center;
          line-height: 275px;
          font-size: 18px;
        }
      }

      .submitbtn {
        width: 315px;
        height: 50px;
        background: #f89503;
        box-shadow: 0px 16px 16px -6px rgba(203, 188, 164, 0.5);
        border-radius: 100px 100px 100px 100px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0 auto;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }

  ::v-deep .el-dialog {
    background-color: transparent;
    box-shadow: none;
  }

  .submitout_box {
    background-color: transparent;

    .submitinner_Box {
      width: 750px;
      // height: 750px;
      background: #fff8ed;
      box-shadow: -4px 0px 50px 0px rgba(0, 0, 0, 0.08);
      border-radius: 50px 50px 50px 50px;
      padding: 50px;
      box-sizing: border-box;

      .topBox {
        width: 375px;
        display: flex;
        align-items: center;
        margin: 0 auto;

        .selecticon {
          width: 91px;
          height: 27px;
          margin: 0 10px;
        }

        .heng {
          width: 100px;
          height: 2px;
          background-color: #ffe6be;
        }
      }

      .completeBox {
        width: 200px;
        height: 200px;
        margin: 0 auto;

        .completeimgs {
          width: 100%;
          height: 100%;
        }
      }

      .listoutBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
      }

      .listBox {
        width: 315px;
        height: 395px;
        box-shadow: -4px 0px 50px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px 50px 10px 10px;
        border: 1px solid #f89503;
        margin-bottom: 30px;

        .titleBox {
          width: 315px;
          height: 50px;
          background: #f89503;
          border-radius: 10px 50px 0px 0px;
          color: #ffffff;
          text-align: center;
          line-height: 50px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
        }

        .itemBox {
          width: 100%;
          height: 345px;
          padding: 10px 20px;
          box-sizing: border-box;
          overflow: auto;

          .food_item_list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .list_img {
              width: 58px;
              height: 58px;
              box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
              border-radius: 10px 10px 10px 10px;
            }

            .name {
              width: 150px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18px;
              color: #121013;
            }

            .number {
              font-family: DIN Next LT Pro, DIN Next LT Pro;
              font-weight: 400;
              font-size: 18px;
              color: #000;
            }
          }
        }
      }

      .btnBox {
        .btn {
          width: 315px;
          height: 50px;
          border-radius: 100px 100px 100px 100px;
          border: 2px solid #f89503;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #f89503;
          line-height: 50px;
          text-align: center;
          margin: 0 auto;
          cursor: pointer;
        }

        .btns {
          background-color: #f89503;
          color: #ffffff;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>